import React from 'react';
import { Layout, Menu, Breadcrumb, Popconfirm } from 'antd';
import { Link } from 'react-router-dom'
import { useNavigate } from 'react-router-dom';

import './home.css'
import logo from '../../assets/logo.png'
import out from '../../assets/out.svg'
import routes from '../../routes'




import { Route, Routes } from 'react-router-dom'

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;


export default function Home() {
    const Navigate = useNavigate()


    let { name, powerid } = JSON.parse(localStorage.getItem('userInfo'))


    let newRouter = routes

    if (powerid === 2) {
        newRouter = routes.slice(1, 3)
    } else if (powerid === 3) {
        newRouter = routes.slice(1, 4)

    } else if (powerid === 4) {
        newRouter = routes.slice(1, 2).concat(routes.slice(4, 5))
    } else if (powerid === 5) {
        newRouter = routes.slice(1, 2).concat(routes.slice(5, 6))
    }
    //时间戳
    function getDate() {
        let myDate = new Date()
        let m = myDate.getMonth()
        m = m + 1
        if (m < 10) {
            m = '0' + m
        }
        return `${myDate.getFullYear()}年${m}月${myDate.getDate()}日`
    }


    //退出系统
    function outSystem(e) {
        console.log(e);
        localStorage.removeItem('token')
        localStorage.removeItem('userInfo')
        localStorage.removeItem('userArr')
        Navigate('/login')
    }



    return (
        <div>
            <Layout>
                <Header className="header" style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <div className='logo'>
                        <img src={logo} alt="logo" />
                    </div>
                    {/* <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                            <Menu.Item key="1">nav 1</Menu.Item>
                            <Menu.Item key="2">nav 2</Menu.Item>
                            <Menu.Item key="3">nav 3</Menu.Item>
                        </Menu> */}
                    <div style={{ display: 'flex', width: '460px', justifyContent: 'space-around', userSelect: 'none', }}>
                        <p>您好: <span style={{ fontSize: '16px', fontWeight: 'bold' }}>{name}</span>  当前时间：{getDate()} </p>

                        <Popconfirm
                            title="确认是否退出系统？"
                            onConfirm={outSystem}
                            okText="Yes"
                            cancelText="No"
                        >
                            <div style={{ cursor: 'pointer' }}>
                                <img src={out} alt="out" style={{ width: '20px' }} />&nbsp;<span style={{ fontSize: '15px' }}>退出系统</span>
                            </div>
                        </Popconfirm>
                    </div>
                </Header>
                <Layout>
                    <Sider width={200} className="site-layout-background">
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%', borderRight: 0 }}
                        >
                            {
                                newRouter.map((item) => {
                                    return <SubMenu key={item.key} icon={item.icon} title={item.title}>
                                        {
                                            item.children.map((value) => {
                                                return <Menu.Item key={value.key}><Link to={value.path}>{value.name}</Link></Menu.Item>
                                            })
                                        }
                                    </SubMenu>
                                })
                            }

                        </Menu>
                    </Sider>
                    <Layout style={{ padding: '0 24px 24px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            {/* {
                                routPath.map((item, index) => {
                                    return <Breadcrumb.Item key={index}>{item}</Breadcrumb.Item>
                                })
                            } */}
                        </Breadcrumb>
                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                            }}
                        >
                            <Routes>
                                {
                                    newRouter.map((item) => {
                                        return item.children.map((value) => {
                                            return <Route index={value.index} path={value.path} element={value.element}>{value.name}</Route>
                                        })
                                    })
                                }
                            </Routes>
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        </div>
    )
}
